import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

import ChatPng from './chat.png'
import FriendPng from './friends.png'
import BriefcasePng from './briefcase.png'
import ChatList from './ChatList'
import FriendList from './FriendList'

import PubSend from '../PubSend'

export default function ChatContainer(props) {

  return (
    <Router basename="/chat">
    
    <PubSend></PubSend>

    <div className="w-screen h-screen h-full w-full bg-gray-200 flex flex-row justify-center items-center bg-chat">

      <div className="flex flex-row w-2/3 h-3/4 border mx-auto my-auto border rounded-md">

        {/* 菜单 */}
        <div className="w-20 h-full bg-gray-100 relative border-r-2 border-gray-200">
          <div className="w-full pt-14 pb-10">
            <Link to="">
              <img className="w-16 h-16 block mx-auto border rounded" src="https://picsum.photos/400/400/?blur=4&grayscale" alt="icon" />
            </Link>
          </div>
          <div className="w-full my-4">
            <Link to="/chat_list">
              <img className="w-10 h-10 block mx-auto border" src={ChatPng}  alt="icon" />
            </Link>
          </div>
          <div className="w-full my-4">
            <Link to="/friend_list">
              <img className="w-10 h-10 block mx-auto border" src={FriendPng}  alt="icon" />
            </Link>
          </div>
          <div className="absolute bottom-0 left-0 w-full h-24">
            
            <div className="w-10 my-4 mx-auto">
              <Link to="/setting">
                <img className="" src={BriefcasePng} alt="icon" />
              </Link>
            </div>

          </div>


        </div>

        {/* 列表 */}
        <div className="w-full h-full">

          <Switch>
            <Route path="/chat_list" component={ChatList} />
            <Route path="/friend_list" component={FriendList} />

          </Switch>

        </div>

      </div>

    </div>
    
    </Router>
    
  )

}